<template>
	<div class='detail'>
		<header>
			<div class='return' :style='styleOpacity'>
				<i
					class='iconfont icon-fanhui' 
					@click='goBack'
					:style='iStyle'
				></i>
				<ul v-show='isHeader'>
					<li>商品</li>
					<li>评价</li>
					<li>详情</li>
					<li>推荐</li>
				</ul>
				<i 
					class='iconfont icon-fukuan'
					:style='iStyle'
					@click="toShares"
				></i>
			</div>
		</header>
		<section ref='main'>
			<div>
				<swiper :options="swiperOption">
				
				  <swiper-slide>
						<img :src="goods.imgUrl" alt="">
				  </swiper-slide>
				  <swiper-slide>
				  		<img :src="goods.imgUrl" alt="">
				  </swiper-slide>
				  <swiper-slide>
				  		<img :src="goods.imgUrl" alt="">
				  </swiper-slide>
				  
				  <div class="swiper-pagination" slot="pagination"></div>
				</swiper>
				
				<div>
					<h2>标题:{{ goods.name }}</h2>
					<p>价格:{{ goods.price }}</p>
					<p>详情:{{ goods.content }}</p>
				</div>
				
				<!--测试-->
				<img :src="goods.imgUrl" alt="">
				<img :src="goods.imgUrl" alt="">
				<img :src="goods.imgUrl" alt="">
			</div>
		</section>
		
		<!--分享-->
		<div class='mask' v-show='isSheet' @click='SharesClose'></div>
		<transition
			enter-active-class='animate__animated animate__slideInUp'
			leave-active-class='animate__animated animate__slideOutDown'
		>
			<div class='detail-sheet' v-show='isSheet'>
				<h3>分享</h3>
				<Share :shareSites='shareSites'></Share>
				<div @click="SharesClose" class='sheet-close'>取消</div>
			</div>
		</transition>
		
	</div>
</template>

<script>
import http from '@/common/api/request.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import BScroll from 'better-scroll'
import Share from 'vue-shares'
export default{
	name : 'Detail',
	data () {
		return {
			shareSites:['qq','weibo','google','baidu'],
			isSheet:false,
			isHeader:false,
			styleOpacity:{},
			iStyle:{},
			BScrollDetail:'',
			goods:'',
			swiperOption: {
				pagination: {
				el: '.swiper-pagination',
				type:"fraction",
				clickable: true
		    },
		    autoplay: {
				delay: 1500,
				stopOnLastSlide: false,
				disableOnInteraction: true
		    }
		  }
		}
	},
	components: {
	  swiper,
	  swiperSlide,
	  Share
	},
	created(){
		this.getData();
	},
	methods:{
		//返回上一页
		goBack(){
			this.$router.back();
		},
		getData(){
			http.$axios({
				url:'/api/goods/id',
				params:{
					id:this.$route.query.id
				}
			}).then(res=>{
				this.goods = res[0];
				
				this.$nextTick(()=>{
					//右侧滑动
					this.BScrollDetail = new BScroll(this.$refs.main,{
						click:true,
						probeType:3
					});
					
					this.BScrollDetail.on('scroll',(pos)=>{
							
						let posY = Math.abs( pos.y );
						let opacity = posY / 180;

						opacity = opacity > 1 ? 1 : opacity < 0.3 ? 0 : opacity ;
						
						if( posY >= 50 ){
							this.isHeader = true;
							this.styleOpacity = {
								opacity:opacity,
								color:'#000',
								background:'#fff'
							}
							this.iStyle = {
								background:'#fff'
							}
						}else{
							this.isHeader = false;
							this.styleOpacity = {
								opacity:1
							}
							this.iStyle = {
								background:'#ccc'
							}
						}
					})
				})
			})
		},
		toShares(){
			this.isSheet = true;
		},
		SharesClose(){
			this.isSheet = false;
		}
	}
}
</script>

<style scoped lang='scss'>
.detail{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.return{
	position: fixed;
	left:0;
	top:0;
	z-index: 888;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding:0 20px;
	width: 100%;
	height: 50px;
	color:#fff;
	opacity: 1;
	ul{
		display: flex;
		font-size:12px;
		li{
			margin:0 6px;
		}
	}
}
section{
	padding-top:50px;
	width: 100%;
	height: 100%;
	img{
		width: 100%;
		height: 420px;
	}
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
	text-align: right;
}
.mask{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,.8);
	z-index: 997;
}
.detail-sheet{
	position: fixed;
	left:0;
	bottom:0;
	z-index: 999;
	width: 100%;
	height: 200px;
	text-align: center;
	background-color: #fff;
}
.sheet-close{
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	padding:10px 0;
	border-top:2px solid #ccc;
}

</style>
